<template>
  <div class="allpage">
    <!-- 营销海报 -->
      <el-form ref="ruleForm" :inline="true" :model="ruleForm" class="form-style">
       <el-row style="border-bottom:1px solid #eeeeee">
         <el-col>
            <el-form-item prop="input" style="margin:15px 0 15px 30px">
          <el-input v-model="ruleForm.input" placeholder="标题" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin:15px 0 15px 30px">
          <el-button icon="el-icon-refresh" style="margin-left:30px" type="warning" @click="clean('ruleForm')">重置</el-button>
          <el-button  icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
         </el-col>
       </el-row>
        <el-button type="success" size="medium" @click="addPost" style="margin:15px 0 15px 30px">新增海报</el-button>
      </el-form>

      <div class="table-style">
      <el-table :data="tableData" border>
        <el-table-column label="编号" prop="PId" width></el-table-column>
        <el-table-column label="标题" prop="Title" width></el-table-column>
        <el-table-column label="图片" prop="PosterUrl" width>
          <template slot-scope="scope">
            <el-image v-image-preview style="width:80px;height:60px" :src="scope.row.PosterUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="CreateTime" width></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button  type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
            <el-button type="danger" @click="del(scope.row)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <botpage
    class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
      </div>
    <post-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      :formData="ruleForm"
    />
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import PostDialog from "./children/PostDialog";
import { PostApi, DeleteGBPoster } from "@/request/api";
export default {
  components: {
    Botpage,
    PostDialog,
  },
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      ruleForm: {
        input:"",
      },
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      total: 1,
    };
  },
  created() {
    this.getTableDatas();
  },
  methods: {
    search(row){
     this.getTableDatas()
    },
    addPost() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增海报";
      this.ruleForm = {};
    },
    clean(ruleForm) {
      this.$refs[ruleForm].resetFields();
      this.getTableDatas()
    },
    getTableDatas() {
      PostApi({
        SreachValues:this.ruleForm.input,
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        CustomerId: 1
      })
        .then((res) => {
          this.dialogFormVisible = false
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for ( let i in this.tableData) {
            that.tableData[i].CreateTime = this.tableData[i].CreateTime.replace(/(\/)/g,'-')
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }, 
    del(row) {
      if (row.PId) {
        this.$confirm("是否要删除该条信息?", "删除提示", {}).then((res) => {
          DeleteGBPoster({
            PId: row.PId,
          }).then((res) => {
            if (res.Message) {
              this.getTableDatas();
               this.$confirm("该条信息删除成功！", "删除成功", {})
            }
          })
        });
      }
    },
    edit(row) {
      console.log(row)
      this.dialogFormVisible = true;
      this.ruleForm = row
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableDatas();
      }
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
  },
};
</script> 

<style lang="less" scoped>
.po-top {
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .po-top-top {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .po-top-bot {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>